<template>
    <div class="mod-config">
        <!--  头部：新增，批量删除    -->
        <div>
            <!--    新增按钮      -->
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addSpecialAttendance">新增特殊考勤</el-button>
        </div>
        <el-divider></el-divider>
        <!--   主体：表格（基本信息，修改，删除）   -->
        <div class="table">
            <el-table :data="tableData" border style="width: 100%" v-loading="dataListLoading" >
                <el-table-column type="index" header-align="center" align="center" width="100" label="序号">
                    <template #default="scope">
                        <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="data" label="日期" width="230" align="center"></el-table-column>
                <el-table-column prop="mark" label="说明" width="230" align="center"></el-table-column>
                <el-table-column prop="isWork" label="特殊类型" width="230" align="center">
                    <template #default="scope">
                        <span v-if="scope.row.isWork === true">工作日</span>
                        <span v-else>休息日</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建日期" width="230" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-delete" type="danger" @click="deleteSpecialAttendance(scope.row.id)">
                            删 除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    align="left"
                    @current-change="changePage"
                    background
                    layout="total, prev, pager, next"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    :total="total">
            </el-pagination>
            <!--   弹窗-新增特殊考勤日期  -->
            <el-dialog title="新增特殊考勤日期" :visible.sync="editFormVisibleForAddAttendanceSpecial" :show-close="isClose" :close-on-click-modal="isClose" center>
                <el-divider><i class="el-icon-setting"></i></el-divider>
                <el-form :model="addAttendanceSpecialForm" :rules="addAttendanceSpecialFormRules"  label-width="0px" class="demo-ruleForm">
                    <el-form-item prop="data" label="">
                        <el-date-picker
                            v-model="addAttendanceSpecialForm.data"
                            type="date"
                            placeholder="选择特殊日期"
                            align="right"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <div style="height: 20px"></div>
                    <el-form-item prop="mark" label="">
                        <el-input style="font-size: 16px;" placeholder="请填写说明" v-model="addAttendanceSpecialForm.mark">
                            <template slot="prepend"><i class="el-icon-edit"></i>说明</template>
                        </el-input>
                    </el-form-item>
                    <div style="height: 20px"></div>
                    <el-form-item prop="isWork" label="">
                        <el-radio-group v-model="addAttendanceSpecialForm.isWork">
                            <el-radio :label="true">工作日</el-radio>
                            <el-radio :label="false">休息日</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editFormVisibleForAddAttendanceSpecial=false">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import dayjs from "dayjs";

export default {
    data() {
        return {
            //是否是搜索
            isSearch:false,
            // 当前页
            currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
            // 一共多少页
            pageSize: 10,
            // 一共多少条
            total: 10,
            // 加载
            dataListLoading:false,
            //表格数据
            tableData:[],
            //新增特殊考勤日期弹窗
            editFormVisibleForAddAttendanceSpecial:false,
            //是否可自动关闭弹窗
            isClose:false,
            //新增特殊考勤日期表单
            addAttendanceSpecialForm:{
                data:'',
                mark:'',
                isWork:true
            },
            //新增特殊考勤日期表单验证
            addAttendanceSpecialFormRules:{
                data: [
                    { required: true, message: '请输入日期', trigger: 'blur' },
                ],
                mark: [
                    { required: true, message: '请输入说明', trigger: 'blur' },
                ],
                isWork: [
                    { required: true, message: '请选择特殊类型', trigger: 'blur' },
                ]
            },
            //时间选择器
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now();
                }
            }
        }
    },
    mounted() {
        this.isSearch = false;
        this.loadDataList();
    },
    methods: {
        dayjs,
        // 新增特殊考勤日期
        addSpecialAttendance(){
          this.editFormVisibleForAddAttendanceSpecial = true;
        },
        // 确认提交新增特殊考勤日期
        submitForm() {
            let that = this;
            that.$confirm('确定提交吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                that.addAttendanceSpecialForm.data = dayjs(that.addAttendanceSpecialForm.data).format('YYYY-MM-DD');
                that.$http('/attendance/specialAdd','POST',that.addAttendanceSpecialForm,(resp)=>{
                    if(resp.data.code === 20000){
                        that.$message({
                            type: 'success',
                            message: '新增成功'
                        });
                        that.editFormVisibleForAddAttendanceSpecial = false;
                        that.loadDataList();
                    }else{
                        that.$message({
                            type: 'error',
                            message: resp.data.msg
                        });
                    }
                })
            }).catch(()=>{})
        },
        // 切换分页
        changePage(page) {
            this.currentPage = page;
            this.loadDataList();
        },
        //加载特殊考勤日期数据
        loadDataList(){
            let that = this;
            this.dataListLoading = true;
            that.$http('/attendance/specialList','POST',{
                pageNum:that.currentPage
            },(resp)=>{
                if(resp.data.code === 20000){
                    let data = resp.data.data;
                    that.tableData = data.list;
                    if(data.list.length <= 0){
                        this.currentPage = 1;
                        this.reLoadDataList();
                    }else{
                        let message = '暂无';
                        for (let e of that.tableData) {
                            this.specialInfo(e,message)
                        }
                    }
                }
                that.currentPage = resp.data.data.currentPage;
                that.pageSize = resp.data.data.pageSize;
                that.total = resp.data.data.total;
                this.dataListLoading = false;
            })
        },
        //特殊考勤日期数据
        specialInfo(e,message){
            if (e.data === ''|| e.data === null){
                e.data = message;
            }else{
                e.data = dayjs(e.data).format('YYYY-MM-DD');
            }
            if(e.mark === ''|| e.mark === null){
                e.mark = message;
            }
            if(e.createTime === null || e.createTime === ''){
                e.createTime = message;
            }
        },
        //再次加载特殊考勤日期数据
        reLoadDataList(){
            let that = this;
            this.dataListLoading = true;
            that.$http('/attendance/specialList','POST',{
                pageNum:that.currentPage
            },(resp)=>{
                if(resp.data.code === 20000){
                    let data = resp.data.data;
                    that.tableData = data.list;
                    if(data.list.length <= 0){
                        this.currentPage = 1;
                    }else{
                        let message = '暂无';
                        for (let e of that.tableData) {
                            this.specialInfo(e,message)
                        }
                    }
                }
                that.currentPage = resp.data.data.currentPage;
                that.pageSize = resp.data.data.pageSize;
                that.total = resp.data.data.total;
                this.dataListLoading = false;
            })
        },
        //根据特殊考勤日期id删除特殊考勤
        deleteSpecialAttendance(id){
            let that = this;
            that.$confirm('确定删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                that.$http('/attendance/deleteSpecialAttendance','DELETE',{
                    id:id
                },(resp)=>{
                    let data = resp.data;
                    if(data.code === 20000){
                        that.$message({
                            type: 'success',
                            message: '删除成功'
                        });
                        that.loadDataList();
                    }else{
                        that.$message({
                            type: 'error',
                            message: data.msg
                        });
                    }
                })
            }).catch(()=>{

            })
        }
    }
}
</script>
<style lang="less">
.table {
  margin-top: 20px;
}
</style>